<template>
  <div class="select-column">
    <div class="text" @click="handleSetShowColumnBtnClick">
      <i
        ><el-icon><Operation /></el-icon
      ></i>
      设置显示字段
    </div>
    <!-- 对话框 当点击"设置显示列"按钮时弹出对话框 -->
    <el-dialog
      title="设置表格列显隐"
      width="700px"
      :append-to-body="true"
      v-model="dialogVisible"
    >
      <!-- 多选框组件 勾选需要在表格中显示的列 -->
      <el-checkbox-group v-model="selectedColumn">
        <el-checkbox
          v-for="item in columnOptions"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
	  <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk()">确 定</el-button>
      </span>
	</template>
    </el-dialog>
  </div>
</template>

<script setup>
const dialogVisible = ref(false);
const selectedColumn = ref([]);
const columnOptions = ref([
  {
    value: "extendName",
    label: "类型",
  },
  {
    value: "fileSize",
    label: "大小",
  },
  {
    value: "uploadTime",
    label: "修改日期",
  },
  {
    value: "deleteTime",
    label: "删除日期",
  },
]);
function handleSetShowColumnBtnClick() {
  dialogVisible.value = true;
}
function dialogOk(){
	dialogVisible.value = false;
}
</script>

<style lang="stylus" scoped>
.select-column {
  .text {
    padding-top: 8px;
    cursor: pointer;

    &:hover {
      color: #409EFF;
    }
  }
}
</style>
